@extends('layouts.back_stage')
@section('content')
    <script src="{{env('CDN_DOMAIN_NAME')}}/js/commonjs/JsBarcode.code128.min.js"></script>
    <!-- 打印吊牌-->
    <div class="container">
        <!-- 主体-->
        <div class="row">
            <div style="margin:30px;"><h3>打印吊牌</h3></div>
            <div style="width:90%;">
                <div class="form-group">
                    <button type="button" name="button" class="btn btn-info print">打印</button>
                    <!--startprint-->
                    <style>
                        .print-box{
                            /* width:206.5px; */
                            width:210px;
                            list-style: none;
                            margin:0 auto;
                            color:#000;
                        }
                        .print-box li{
                            width:210px;
                            background-color:white;
                            height:111mm;
                            border-radius: 10px;
                            margin-bottom:20px;
                        }
                        .print-box li p{
                            margin-bottom: 2px;
                            margin-left:10px;
                            font-size:13px;
                            height:15px;
                        }
                        .print-box li p span{
                            margin-left:14px;
                        }
                        .print-box li p:first-child{
                            height: 30px;
                            padding-top:15px;
                        }
                        .print-box li p:last-child{
                            text-align: center;
                        }
                        .qrcode{
                            width:200px;
                            margin-left:5px;
                            height: 100px;
                        }
                        .qrcode text{
                            font:bold 24px monospace!important;
                        }
                        .print{float:right;margin-right:20px;}
                        .icon{height: 17px;width: 17px;margin:0 5px;}
                        .icons{width:22px;height:23px;}
                    </style>
                    <ul class="print-box">
                        @if(count($datas))
                            @foreach($datas as $k => $v)
                            <li>
                                <p>品名: {{$v['name']}}</p>
                                <p>系列: {{$brands[$v['brand_id']]}}
                                    @if($brands[$v['brand_id']]=='Soyyos') (写一)
                                    @elseif($brands[$v['brand_id']]=='SoonWord') (上外)
                                    @endif
                                </p>
                                <p>款号: {{$v['girard']}}</p>
                                <p>颜色: {{$v['color']}}</p>
                                <p>尺码: @if(!is_numeric($v['size'])){{$v['size']}}@endif
                                @if(!empty($v['size'] && isset($size_data[$v['size']])))
                                    @if(count($size_data))
                                        <?php $var=$size_data[$v['size']];$var2=explode(',',$var)?>
                                        @foreach($var2 as $k2 )
                                            {{$k2}}
                                         @endforeach
                                    @endif
                                @endif
                                </p>
                                <p>执行标准: {{$v['exec_standard']}}</p>
                                <p>产品等级: 合格品<span>检验员 01</span></p>
                                <p>安全类别: {{$v['safety_class']}}</p>
                                <?php $standard=explode('/',$v['ingredient'])?>
                                @foreach($standard as $k=> $kv)
                                    <p>{{$kv}}</p>
                                    @if($k>=6)@break @endif
                                @endforeach
                                @if(count($standard)<7)
                                    @for($i=1;$i<=7-count($standard);$i++)
                                        <p></p>
                                    @endfor
                                @endif
                                <div style="text-align: center;">
                                    <img src="/img/6.bmp" class="icon">
                                    <img src="/img/con002.jpg" class="icon">
                                    <img src="/img/con001.jpg" class="icon">
                                    <img src="/img/22.bmp" class="icon">
                                    <img src="/img/con003.png" class="icons">
                                </div>
                                <svg class="qrcode"
                                     jsbarcode-format="code128"
                                     jsbarcode-value="{{$v['code']}}"
                                     jsbarcode-width="2"
                                     jsbarcode-textMargin="1"
                                     jsbarcode-margin="1"
                                     jsbarcode-fontoptions="bold">
                                </svg>
                                <p style="margin-left:0;font-size:15px;">RMB : ¥{{$v['price']}}</p>
                            </li>
                            @endforeach
                        @endif
                    </ul>
                    <!--endprint-->
                </div>
            </div>
        </div>
    </div>

    <!-- /主体-->
    </div>
    <!-- /打印吊牌-->
    <script>
        var count = Number(0);
        $(document).ready(function(){
            JsBarcode(".qrcode").init();
//            JsBarcode(".qrcode", {
//                textMargin:5,//设置条形码和文本之间的间距
//                margin:15//设置条形码周围的空白边距
//            });
        });
        $(document).on('click','.print',function(){
            if(count == 0){
                preview();
                count ++;
            }else{
                $(".oText").text('您已经打印过此页的条码了，确定需要再打印吗？');
                $(".oMask").show();
                $(".oAnim").show();
                $(".oBtn1").text("关闭（5s）");
                var second = 5;
                var timer = setInterval(function(){
                    if(second > 0){
                        second--;
                        $(".oBtn1").text("关闭（"+second+"s）");
                    }else{
                        window.close();
                    }
                },1000);
                $('.oBtn0').click(function(){
                    $(".oMask").hide();
                    $(".oAnim").hide();
                    clearInterval(timer);
                    preview();
                });
                $('.oBtn1').click(function(){
                    window.close();
                });
                $(".oClose").click(function(){
                    window.close();
                });
            }
        });
        function preview() {
            var bdhtml = window.document.body.innerHTML;//获取当前页的html代码
            var startStr = "<!--startprint-->";//设置打印开始区域
            var endStr = "<!--endprint-->";//设置打印结束区域
            var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr));//从标记里获取需要打印的页面
            window.document.body.innerHTML = printHtml;//需要打印的页面
            window.print();
            window.document.body.innerHTML = bdhtml;//还原界面
        }
        $("body").keydown(function() {
            if (event.keyCode == "13") {//keyCode=13是回车键
                preview()
            }
        });
    </script>
@endsection
